<template>
  <view class="container">
    <!-- 可滚动内容区域 -->
    <view class="scrollable-content">
    <!-- 积分显示区域 -->
    <view class="points-display">
      <view class="points-badge">
        <text class="points-icon">★</text>
        <text class="points-text">当前积分: {{ points.current }}</text>
      </view>
      
      <!-- 环形进度条 -->
      <view class="circle-container">
        <view class="progress-circle">
          <svg viewBox="0 0 100 100" class="svg-circle">
            <!-- 背景圆 -->
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="#e5e5e5"
              stroke-width="10"
            />
            <!-- 进度圆 -->
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              stroke="url(#colorGradient)"
              stroke-width="10"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="offset"
              transform="rotate(-90 50 50)"
            />
            <!-- 颜色渐变 -->
            <defs>
              <linearGradient id="colorGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#4CD964" />
                <stop offset="50%" stop-color="#FFCC00" />
                <stop offset="100%" stop-color="#FF3B30" />
              </linearGradient>
            </defs>
          </svg>
        </view>
      </view>
    </view>
    
    <!-- 成就徽章区域 -->
    <view class="achievements-section">
      <view class="section-header-with-button">
        <view class="section-header">
          <uni-icons type="star" size="16" color="#FFCC00"></uni-icons>
          <text class="section-title">成就徽章</text>
        </view>
        <Button 
          type="secondary" 
          size="small"
          @click="viewBadgesDetail"
          class="section-action-button"
        >
          <uni-icons type="star" size="14" color="#fff"></uni-icons>
          <text>查看成就徽章</text>
        </Button>
      </view>
      
      <view class="badges-grid">
        <view class="badge-item" v-for="badge in badges" :key="badge.id">
          <view class="badge-icon" :class="{ 'unlocked': badge.unlocked, 'locked': !badge.unlocked }" :style="{ backgroundColor: badge.color }">
            <uni-icons :type="badge.icon" size="24" color="#fff"></uni-icons>
          </view>
          <text class="badge-name">{{ badge.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 奖励清单区域 -->
    <view class="rewards-section">
      <view class="section-header-with-button">
        <view class="section-header">
          <uni-icons type="gift" size="16" color="#4CD964"></uni-icons>
          <text class="section-title">奖励清单</text>
        </view>
        <Button 
          type="secondary" 
          size="small"
          @click="viewRewardsDetail"
          class="section-action-button"
        >
          <uni-icons type="list" size="14" color="#fff"></uni-icons>
          <text>奖励明细</text>
        </Button>
      </view>
      
      <view class="rewards-list">
        <view class="reward-item" v-for="reward in rewards" :key="reward.id">
          <view class="reward-info">
            <view class="reward-icon" :style="{ backgroundColor: reward.color }">
              <uni-icons :type="reward.icon" size="18" color="#fff"></uni-icons>
            </view>
            <view class="reward-details">
              <text class="reward-title">{{ reward.title }}</text>
              <text class="reward-description">{{ reward.description }}</text>
            </view>
          </view>
          <view class="reward-status" :class="reward.status">
            <text>{{ reward.statusText }}</text>
            <uni-icons v-if="reward.status === 'pending'" type="right" size="14" color="#999"></uni-icons>
            <uni-icons v-else type="success" size="14" color="#4CD964"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    const radius = 45;
    const circumference = 2 * Math.PI * radius;
    const progress = 80; // 80%进度
    const offset = circumference - (progress / 100) * circumference;
    
    return {
      points: {
        current: 1250,
        level: 5,
        title: '学习之星',
        nextLevelPoints: 1500,
        progress: 80
      },
      
      // 环形进度条相关数据
      radius,
      circumference,
      offset,
      
      // 成就徽章数据
      badges: [
        {
          id: 1,
          name: '学霸',
          icon: 'book',
          color: '#36CFC9',
          unlocked: true
        },
        {
          id: 2,
          name: '坚持者',
          icon: 'fire',
          color: '#FF7D00',
          unlocked: true
        },
        {
          id: 3,
          name: '未知',
          icon: 'help',
          color: '#CCCCCC',
          unlocked: false
        }
      ],
      
      // 奖励清单数据
      rewards: [
        {
          id: 1,
          title: '学习时长+2小时',
          description: '额外获得2小时专注学习时间',
          icon: 'clock',
          color: '#4CD964',
          status: 'completed',
          statusText: '已获得'
        },
        {
          id: 2,
          title: '积分+100',
          description: '获得额外学习积分奖励',
          icon: 'dollar',
          color: '#FFCC00',
          status: 'pending',
          statusText: '待获得'
        },
        {
          id: 3,
          title: '神秘奖励',
          description: '需要更多抽奖次数解锁',
          icon: 'lock',
          color: '#CCCCCC',
          status: 'locked',
          statusText: '未解锁'
        }
      ]
    };
  },
  
  methods: {
    // 返回仪表盘
    goToDashboard() {
      uni.navigateBack();
    },
    
    // 查看奖励详情
    viewRewards() {
      // 可以跳转到更详细的奖励页面
      console.log('查看奖励详情');
    },
    
    // 查看积分历史
    goToPointsHistory() {
      uni.navigateTo({
        url: '/pages/reward/history'
      });
    },
    
    // 查看成就徽章详情
    viewBadgesDetail() {
      uni.navigateTo({
        url: '/pages/reward/badge-detail'
      });
    },
    
    // 查看奖励明细
    viewRewardsDetail() {
      uni.navigateTo({
        url: '/pages/reward/history'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-base: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$color-primary: #4CD964;
$color-success: #4CD964;
$color-warning: #FFCC00;
$color-danger: #FF3B30;
$color-gray: #CCCCCC;
$color-light-gray: #F5F5F5;
$color-text-primary: #333333;
$color-text-secondary: #666666;
$color-text-tertiary: #999999;
$border-radius-sm: 8px;
$border-radius-base: 12px;
$border-radius-lg: 16px;
$border-color: #E0E0E0;
$card-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

.container {
  padding: 0;
  background-color: $color-light-gray;
  min-height: 100vh;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 适配刘海屏等异形屏设备的顶部安全区域 */
  padding-top: env(safe-area-inset-top);
}

/* 可滚动内容区域 */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS设备上的平滑滚动 */
}

/* 隐藏滚动条但保留滚动功能 */
.scrollable-content::-webkit-scrollbar {
  display: none;
}

.scrollable-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 页面根元素样式重置 */
page {
  margin: 0;
  padding: 0;
  background-color: $color-light-gray;
}

/* 积分显示区域 */
.points-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: $spacing-lg;
  padding-top: $spacing-base;
  padding-bottom: $spacing-base;
  padding-left: $spacing-base;
  padding-right: $spacing-base;
  margin: $spacing-base;
  background-color: #FFFFFF;
  border-radius: $border-radius-base;
  border: 1px solid $border-color;
  box-shadow: $card-shadow;
}



.points-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xs $spacing-base;
  background-color: #FFF5CC;
  border-radius: 20px;
  margin-bottom: $spacing-lg;
}

.points-icon {
  color: #FFCC00;
  font-size: $font-size-sm;
  margin-right: $spacing-xs;
}

.points-text {
  color: #FF9500;
  font-size: $font-size-sm;
  font-weight: 500;
}

/* 环形进度条 */
.circle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240rpx;
  height: 240rpx;
  margin-bottom: $spacing-lg;
}

.progress-circle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.svg-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: $spacing-base;
  width: 100%;
  max-width: 400rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
  background-color: $color-light-gray;
}

.action-btn text {
  margin-left: $spacing-xs;
  color: $color-text-secondary;
}

/* 奖励池标题 */
.reward-pool-header {
  text-align: center;
  margin-bottom: $spacing-xl;
}

.pool-title {
  display: block;
  font-size: $font-size-lg;
  font-weight: bold;
  color: $color-text-primary;
  margin-bottom: $spacing-xs;
}

.pool-subtitle {
  display: block;
  font-size: $font-size-sm;
  color: $color-text-tertiary;
}

/* 成就徽章区域 */
.achievements-section {
  margin-bottom: $spacing-xl;
  padding: 0 $spacing-base;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: $spacing-base;
}

.section-title {
  font-size: $font-size-base;
  font-weight: 600;
  color: $color-text-primary;
  margin-left: $spacing-xs;
}

/* 带按钮的标题区域 */
.section-header-with-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

/* 区域按钮样式 - 适配自定义Button组件 */
.section-action-button {
  margin-left: auto;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $spacing-base;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $spacing-base;
  background-color: #FFFFFF;
  border-radius: $border-radius-base;
  border: 1px solid $border-color;
  box-shadow: $card-shadow;
  transition: all 0.3s ease;
}

.badge-item:active {
  transform: scale(0.98);
}

.badge-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-xs;
}

.badge-icon.locked {
  opacity: 0.6;
}

.badge-name {
  font-size: $font-size-sm;
  color: $color-text-secondary;
}

/* 奖励清单区域 */
.rewards-section {
  margin-bottom: $spacing-xl;
  padding: 0 $spacing-base;
}



/* 卡片悬停效果 */
.card-hover {
  transform: translateY(-4rpx);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.rewards-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-base;
}

.reward-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-base;
  background-color: #FFFFFF;
  border-radius: $border-radius-base;
  border: 1px solid $border-color;
  box-shadow: $card-shadow;
  transition: all 0.3s ease;
}

.reward-item:active {
  transform: scale(0.98);
}

.reward-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.reward-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: $border-radius-sm;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
}

.reward-details {
  flex: 1;
}

.reward-title {
  display: block;
  font-size: $font-size-base;
  font-weight: 500;
  color: $color-text-primary;
  margin-bottom: $spacing-xs;
}

.reward-description {
  display: block;
  font-size: $font-size-xs;
  color: $color-text-tertiary;
}

.reward-status {
  display: flex;
  align-items: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: 16px;
  font-size: $font-size-xs;
}

.reward-status.completed {
  background-color: rgba(76, 217, 100, 0.1);
  color: $color-success;
}

.reward-status.pending {
  background-color: rgba(255, 204, 0, 0.1);
  color: $color-warning;
}

.reward-status.locked {
  background-color: rgba(204, 204, 204, 0.1);
  color: $color-text-tertiary;
}

.reward-status uni-icons {
  margin-left: $spacing-xs;
}
</style>